<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/haha.js"></script>
    <script src="/js/swiper-bundle.min.js"></script>
    <script src="/js/vue-awesome-swiper.js"></script>
    <!-- 引入Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <!-- 引入Swiper依赖 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    

    <title>首页</title>
    <style scoped>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="min-h-screen bg-gray-50">
            <!-- 顶部信息栏 -->
            <div class="bg-white border-b">
                <div class="container mx-auto flex justify-between items-center h-10 text-sm">
                    <div class="flex items-center space-x-4">
                        <span>欢迎来到生鲜优选</span>
                        <a href="login.html" class="text-gray-600 hover:text-green-500">请登录</a>
                        <a href="register.html" class="text-green-500">免费注册</a>
                    </div>
                    <div class="flex items-center space-x-6">
                        <a href="#" class="flex items-center hover:text-green-500">
                            <i class="fas fa-user-circle mr-1"></i>
                            <span>个人中心</span>
                        </a>
                        <a href="#" class="flex items-center text-green-500">
                            <i class="fas fa-shopping-cart mr-1"></i>
                            <span>购物车</span>
                        </a>
                        <a href="#" class="flex items-center hover:text-green-500">
                            <i class="fas fa-clipboard-list mr-1"></i>
                            <span>我的订单</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Logo和搜索区 -->
            <div class="container mx-auto py-6">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="text-3xl font-bold text-green-600 flex items-center">
                            <i class="fas fa-leaf mr-2"></i>
                            <span>生鲜优选</span>
                        </div>
                    </div>
                    <div class="flex-1 max-w-2xl mx-12">
                        <div class="relative">
                            <input type="text" placeholder="搜索生鲜商品"
                                class="w-full h-11 pl-4 pr-12 border-2 border-green-500 rounded-lg focus:outline-none">
                            <button
                                class="absolute right-0 top-0 h-11 w-20 bg-green-500 text-white rounded-r-lg hover:bg-green-600">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center text-green-600">
                        <i class="fas fa-headset text-2xl mr-2"></i>
                        <span class="text-xl">400-888-8888</span>
                    </div>
                </div>
            </div>

            <!-- 主导航 -->
            <div class="bg-green-500">
                <div class="container mx-auto">
                    <div class="flex items-center text-white">
                        <div class="py-4 px-8 bg-green-600 font-medium">全部商品分类</div>
                        <nav class="flex-1">
                            <ul class="flex space-x-8 px-6">
                                <li v-for="item in ['首页', '新鲜蔬菜', '时令水果', '肉禽蛋品', '海鲜水产', '乳品烘焙', '粮油调味']" :key="item"
                                    class="py-4 hover:text-green-200 cursor-pointer">
                                    {{ item }}
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Banner区域 -->
            <div class="container mx-auto mt-6">
                <swiper class="h-96 rounded-lg overflow-hidden" :options="swiperOption">
                    <swiper-slide v-for="(banner, index) in banners" :key="index">
                        <img :src="banner" class="w-full h-full object-cover" />
                    </swiper-slide>
                </swiper>
            </div>

            <!-- 商品列表 -->
            <div class="container mx-auto py-8">
                <div class="grid grid-cols-4 gap-6">
                    <div v-for="(product, index) in products" :key="index"
                        class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-t-lg">
                            <img :src="product.image" class="w-full h-full object-cover" />
                        </div>
                        <div class="p-4">
                            <h3 class="text-gray-800 h-12 leading-6 line-clamp-2">{{ product.name }}</h3>
                            <div class="mt-2 flex items-center justify-between">
                                <div class="text-green-500 font-medium">
                                    <span class="text-sm">¥</span>
                                    <span class="text-xl">{{ product.price }}</span>
                                </div>
                                <div class="text-gray-400 text-sm">已售 {{ product.sold }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务特点 -->
            <div class="bg-white py-12 mt-8">
                <div class="container mx-auto">
                    <div class="grid grid-cols-4 gap-8">
                        <div v-for="(feature, index) in features" :key="index" class="flex items-center justify-center">
                            <i :class="feature.icon" class="text-3xl text-green-500 mr-4"></i>
                            <div>
                                <h4 class="font-medium text-gray-800">{{ feature.title }}</h4>
                                <p class="text-gray-500 text-sm mt-1">{{ feature.desc }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 页脚导航 -->
            <footer class="bg-gray-100 pt-12 pb-8 mt-12">
                <div class="container mx-auto">
                    <div class="grid grid-cols-5 gap-8">
                        <div v-for="(nav, index) in footerNav" :key="index">
                            <h5 class="font-medium text-gray-700 mb-4">{{ nav.title }}</h5>
                            <ul class="space-y-2">
                                <li v-for="(item, idx) in nav.items" :key="idx">
                                    <a href="#" class="text-gray-500 hover:text-green-500 text-sm">{{ item }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

</body>
<script>
    Vue.use(window.VueAwesomeSwiper.default || window.VueAwesomeSwiper)
    const app = new Vue({
        el: '#app',
        data() {
            return {
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },
                banners: [
                    'https://ai-public.mastergo.com/ai/img_res/701a8f0c4c59d3f3bffe3daa9b7be8b6.jpg',
                    'https://ai-public.mastergo.com/ai/img_res/1ce267f82a58fb37e48a971df47597c6.jpg',
                    'https://ai-public.mastergo.com/ai/img_res/5f5967e4205f9be2bed71594ca0ea3da.jpg'
                ],
                products: Array(12).fill().map((_, i) => ({
                    name: `有机生菜 ${i + 1}号 新鲜采摘 农场直供 无农药残留 500g/份`,
                    price: ((Math.random() * 20 + 10).toFixed(2)),
                    sold: Math.floor(Math.random() * 1000),
                    image: 'https://ai-public.mastergo.com/ai/img_res/118e91062327527419f97dfe841373d6.jpg'
                })),
                features: [{
                        icon: 'fas fa-box-open text-green-500',
                        title: '品类齐全',
                        desc: '轻松购物'
                    },
                    {
                        icon: 'fas fa-truck text-green-500',
                        title: '多仓直发',
                        desc: '极速配送'
                    },
                    {
                        icon: 'fas fa-medal text-green-500',
                        title: '正品行货',
                        desc: '精致服务'
                    },
                    {
                        icon: 'fas fa-tags text-green-500',
                        title: '天天低价',
                        desc: '畅选无忧'
                    }
                ],
                footerNav: [{
                        title: '购物指南',
                        items: ['购物流程', '会员介绍', '生鲜购物', '常见问题']
                    },
                    {
                        title: '配送方式',
                        items: ['上门自提', '配送服务', '配送费用', '配送范围']
                    },
                    {
                        title: '支付方式',
                        items: ['货到付款', '在线支付', '分期付款', '公司转账']
                    },
                    {
                        title: '售后服务',
                        items: ['售后政策', '退款说明', '退换货流程', '品质保证']
                    },
                    {
                        title: '特色服务',
                        items: ['生鲜专区', '企业采购', '礼品卡', '精选优惠']
                    }
                ]
            }
        }
    })
</script>

</html>